<template>
  <div class="commeerence-box">
    <div class="container">
      <div>明星会员</div>
      <div class="left-img">
        <div>
          <el-carousel height="80px" arrow="never" indicator-position="none">
            <el-carousel-item v-for="(item, index) in starUser" :key="item.index">
              <img style="width: 100%; height: 100%;" @click="open2" :src="'' + item.avatar"  />
            </el-carousel-item>
          </el-carousel>
          <span class="demonstration">孙浩然</span>
        </div>
        <div>
          <el-carousel height="80px" arrow="never" indicator-position="none">
            <el-carousel-item v-for="(item, index) in starUser" :key="item.index">
              <img style="width: 100%; height: 100%;" @click="open2" :src="item.avatar" alt />
            </el-carousel-item>
          </el-carousel>
          <span class="demonstration">孙浩然</span>
        </div>
        <div>
          <el-carousel height="80px" arrow="never" indicator-position="none">
            <el-carousel-item v-for="(item, index) in starUser" :key="item.index">
              <img style="width: 100%; height: 100%;" @click="open2" :src="item.avatar" alt />
            </el-carousel-item>
          </el-carousel>
          <span class="demonstration">孙浩然</span>
        </div>
        <!-- <div v-for="(item) in starUser" :key="item.index">
          <div style="width: 80px; height: 90px;">
            <img
              style="width: 100%; height: 100%;"
              @click="open2"
              :src="'https://qrcode.qgfhrz.cn:81/prod-api'+item.avatar"
              alt=""
            />
          </div>
          <div class="membername" style="font-size: 12px; text-align: center;">{{item.name}}</div>
        </div>-->
        <!-- ___________________________________________________ -->
        <Bigscreen :openBigscreendialog="parent" @changeBigscreen="changeBigscreen" isStarMember="1"></Bigscreen>
      </div>
    </div>
    <div class="container">
      <div>商会荣誉</div>
      <div class="right-img">
        <div class="left">
          <el-carousel height="90px" arrow="never" indicator-position="none">
            <el-carousel-item v-for="item in commerceHonorsList" :key="item.id">
              <img :src="item.honorImage" alt />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="rifht">
          <el-carousel height="90px" arrow="never" indicator-position="none">
            <el-carousel-item v-for="item in commerceHonorsList" :key="item.id">
              <img :src="item.honorImage" alt />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- ———————————————————————————————————————————————————————————— -->
    </div>
    <Memberhonors :opendialog="opendialog" @changeBigscreen2="changeBigscreen2"></Memberhonors>
  </div>
  <!-- 弹框 -->
</template>

<script>
import { getHonorsList, selectStarUser } from '@/api/bigscreen/bigscreen.js'
import Memberhonors from '../memberhonors/memberhonors.vue'
import Bigscreen from '@/views/bigscreenprop/bigscreenprop.vue'
export default {
  components: {
    Bigscreen,
    Memberhonors
  },
  data() {
    return {
      starUser: [],
      parent: false,
      commerceHonorsList: [],
      opendialog: false,

    }
  },
  mounted() {
    this.StarUser();
    this.getcommerceHonorsList()
    // console.log(this.commerceHonorsList,'starimg')
  },
  methods: {
    open2() {
      this.parent = true
    },
    changeBigscreen(e) {
      this.parent = e
    },
    changeBigscreen2(e) {
      this.opendialog = e
    },
    // 获取明星会员数据
    StarUser() {
      selectStarUser().then((res) => {
        if (res.code === 200) {
          const url = 'https://qrcode.qgfhrz.cn:81/prod-api'
          res.data.map((item) => {
            item.avatar = url + item.avatar
          })
          this.starUser = res.data
        }

      });
    },
    // 获取商会荣誉
    getcommerceHonorsList() {
      const pageNum = this.pageNum
      const pageSize = this.pageSize
      getHonorsList({ pageNum, pageSize }).then((res) => {
        if (res.code === 200) {
          const { rows } = res
          // 只要数组的前三个数据
          console.log(rows, 'rows')
          //  const data1 = rows.slice(0, 2)
          // 使用map方法遍历数组，对数组中的每一项进行处理，添加图片的前缀
          const ommerceHonorsList = rows.map((item) => {
            const imageurl = "https://qrcode.qgfhrz.cn:81/prod-api";
            item.honorImage = imageurl + item.honorImage
            console.log(item.honorImage, 'item')
            return item
          })
          console.log(ommerceHonorsList, 'ommerceHonorsList')
          this.commerceHonorsList.push(...ommerceHonorsList)
        }
      })
    },
    // 打开弹框
    open() {
      this.opendialog = true
    }
  },
}

</script>

<style lang="scss" scoped>
.commeerence-box {
  display: flex;
  justify-content: space-between;
  color: #09f5fc;
  height: 100%;

  //  background-color: gray;
  .container {
    width: 100%;
    height: 100%;
    padding: 20px;

    .left-img {
      display: flex;
      //  justify-content: space-between;
      justify-content: space-around;

      &>div {
        margin-top: 10px;
      }

      .demonstration {
        padding: 10px;
      }
    }

    .right-img {
      // display: flex;
      // //  justify-content: space-between;
      // justify-content: space-around;

     &>div {
       margin-top: 15px;
     }
      .left {
        // background-color: pink;
        float: left;
        width: 100px;
      }

      .rifht {
        // background-color: red;
        float: right;
        width: 100px;
      }

      .demonstration {
        padding: 10px;
      }
    }
  }
}
</style>
